<template>
    <div class="detail_info_container">
        <!-- 基本信息 -->
        <img class="baofu_logo" src="@/assets/imgs/sys/baofu-logo-square.png" />
        <el-form label-position="right" label-width="auto">
            <el-form-item v-for="item in baseInfoArr" :key="item.key" :label="item.label">
                <template v-if="item.key === 'bankName' && [11, 12].includes(baseInfoObj.accountStatus)">
                    <span>-</span>
                    <span class="to_open" @click="toOpenHandle"> 立即绑卡 </span>
                </template>
                <span v-else>{{ Data[item.key] || '-' }}</span>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, computed } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps({
    baseInfoObj: {
        type: Object,
        default: () => {
            return {};
        }
    }
});
const router = useRouter();
const Data = computed(() => {
    return props.baseInfoObj;
});

// 企业账户
const companyInfoObj = [
    { label: '企业名称：', key: 'merchantName', value: '' },
    { label: '开通时间：', key: 'createdAt', value: '' },
    { label: '登录号：', key: 'loginNo', value: '' },
    { label: '开户银行：', key: 'bankName', value: '' },
    { label: '对公账号：', key: 'cardNo', value: '' },
    { label: '微信支付商户号：', key: 'simId', value: '' }
];
// 个体账户
const separateInfoObj = [
    { label: '企业名称：', key: 'merchantName', value: '' },
    { label: '开通时间：', key: 'createdAt', value: '' },
    { label: '登录号：', key: 'loginNo', value: '' },
    { label: '开户银行：', key: 'bankName', value: '' },
    { label: '对公账号：', key: 'cardNo', value: '' },
    { label: '微信支付商户号：', key: 'simId', value: '' }
];
// 个人账户
const personInfoObj = [
    { label: '姓名：', key: 'realName', value: '' },
    { label: '身份证号：', key: 'idCardNoWithStar', value: '' },
    { label: '登录号：', key: 'loginNo', value: '' },
    { label: '开户银行：', key: 'bankName', value: '' },
    { label: '银行卡号：', key: 'bankNo', value: '' },
    { label: '开通时间：', key: 'createdAt', value: '' }
];
const baseInfoArr = computed(() => {
    let arr = [];
    //  1 企业账户 2 个体账户 3 个人账户
    switch (props.baseInfoObj.accountType) {
        case 1:
            // 若没开通微信支付，则不展示  微信支付商户号
            if (props.baseInfoObj.accountStatus !== 10) {
                arr = companyInfoObj.filter(x => x.key !== 'simId');
            } else {
                arr = companyInfoObj;
            }
            break;
        case 2:
            // 若没开通微信支付，则不展示  微信支付商户号
            if (props.baseInfoObj.accountStatus !== 10) {
                arr = separateInfoObj.filter(x => x.key !== 'simId');
            } else {
                arr = separateInfoObj;
            }
            // 若绑定对私账户，则将【对公账户】改为【银行卡号】（1对公卡，2对私卡）
            if (props.baseInfoObj.bindAccountType === 2) {
                arr[4].label = '银行卡号：';
            }
            break;
        case 3:
            arr = personInfoObj;
            break;
        default:
            break;
    }
    return arr;
});

/**
 * 去绑卡
 */
const toOpenHandle = () => {
    const url = {
        // 个体账户
        2: '/pay/baohutong/individual',
        // 个人账户
        3: '/pay/baohutong/person'
    };
    router.push({
        path: url[props.baseInfoObj.accountType],
        query: { no: props.baseInfoObj.loginNo, paySequenceNo: props.baseInfoObj.paySequenceNo }
    });
};
</script>

<style lang="scss" scoped>
.detail_info_container {
    .baofu_logo {
        width: 56px;
        height: 56px;
    }
    .el-form-item--default {
        margin-bottom: 5px;
    }
    :deep(.el-form-item__label) {
        padding: 0;
    }
    .to_open {
        margin-left: 56px;
        color: #ff6b00;
        cursor: pointer;
    }
}
</style>
